<template>
	<div class="wrapper">
        <heade>
			<p>我的</p>
		</heade>
		<!-- header部分 -->
		<header>
			<img :src="user.userImg" alt="../assets/user2.png">
			<p>{{ user.userName }}</p>
		</header>

		<!-- 个人信息部分 -->
		<ul class="userinfoa">
			<li @click="toChangeAvatar">
				<img src="../assets/user.png"><p>我的头像</p>
				
			</li>
			<li @click="toMyWallet">
				<img src="../assets/wallet.png"><p>我的钱包</p>
				
			</li>
			<li @click="toOrderList">
				<img src="../assets/points.jpg"><p>我的订单</p>
				
			</li>
			<li @click="toPointMall">
				<img src="https://img.icons8.com/color/96/000000/gift.png"><p>积分商城</p>
			</li>
			</ul>
			<ul class="userinfob">
			<li @click="changePw">
				<p><i class="fa fa-expeditedssl"></i>修改密码</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="toMyFavorites">
				<p><i class="fa fa-gratipay"></i>我的收藏</p>
				<i class="fa fa-angle-right"></i>	
			</li>
			<li @click="logOut()">
				<p><i class="fa fa-sign-out"></i>退出登录</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="toChangeName">
				<p><i class="fa fa-address-card"></i>修改昵称</p>
				<i class="fa fa-angle-right"></i>
			</li>
		
		</ul>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue'
	export default {
		name: 'MyInfo',
		data() {
			return {

				user:{}
			}
		},
		
		methods: {
			changePw(){
				this.$router.push({path:'/changePw'});
			},
			toOrderList(){
				this.$router.push({path:'/orderList'});
			},
			toChangeAvatar(){
				this.$router.push({path:'/changeAvatar'});
			},
			toChangeName(){
				this.$router.push({path:'/changeName'});
			},
			toMyFavorites(){
				this.$router.push({path:'/myFavorites'});
			},
			toMyWallet(){
				this.$router.push({path:'/myWallet'});
			},
			toPointMall(){
				this.$router.push({path:'/pointMall'});
			},
			logOut() {
				this.$removeSessionStorage('user');
				let result= this.$getSessionStorage('user');
				if(result==null) {
					alert('退出成功');
			        this.$router.push('/index');  				
				}
				else{ alert('退出失败')}
			},
			 
			
			// 获取用户信息
			getUserById: function(userId) {
				
				let url = `UserController/getUserById/${userId}`;
				this.$axios.get(url).then(resp => {
						this.user = resp.data.result;
					})
					.catch(err => {
						console.log(err);
					})
			}
			
			
		},
		components: {
			Footer
		},
		created: function() {
			let user = this.$getSessionStorage('user');
						if (user != null) {
							this.getUserById(user.userId);
						}
		}
	}
</script>

<style scoped="scoped">

	
	/*************** 总容器 ***************/
	.wrapper {
	    width: 100%;
	    height: 100%;
	    background-color: #F3F4F6;
	    padding-top: 12vw; /* 调整顶部空间，使页面内容不会被标题遮挡 */
	}
	
	/*************** 顶部标题 ***************/
	.wrapper heade {
	    width: 100%;
	    height: 12vw;
	    background-color: #0097FF;
	    color: #fff;
	    font-size: 5vw;
	    position: fixed;
	    left: 0;
	    top: 0;
	    z-index: 1000;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	/*************** header ***************/
	.wrapper header {
	    width: 100%;
	    height: 30vw;
	    padding-top: 4vw;
	    background-color: #0097FF;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    font-size: 5vw;
	    padding-left: 5vw; /* 调整内边距 */
	}
	
	.wrapper header img {
	    width: 18vw;
	    height: 18vw;
	    border-radius: 50%;
	    margin-right: 4vw; /* 调整头像与文字的间距 */
	    border: 2px solid #fff;
	}
	
	.wrapper header p {
	    font-size: 5.5vw;
	    font-weight: bold;
	}
	
	/*************** 用户信息部分 A ***************/
	.wrapper .userinfoa {
	    width: 100%;
	    padding: 3vw 0;
	    background-color: #fff;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    margin-top: 2vw;
	    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	    border-radius: 8px;
	}
	
	.wrapper .userinfoa li {
	    width: 30%;
	    text-align: center;
	    color: #666;
	    user-select: none;
	    cursor: pointer;
	    padding: 2vw;
	    transition: background-color 0.3s;
	    border-right: 1px solid #eee;
	}
	
	.wrapper .userinfoa li:last-child {
	    border-right: none; /* 去掉最后一个的右边框 */
	}
	
	.wrapper .userinfoa li:hover {
	    background-color: #f0f0f0; /* 悬停效果 */
	}
	
	.wrapper .userinfoa li img {
	    width: 10vw;
	    height: 10vw;
	    margin-bottom: 1vw;
	}
	
	.wrapper .userinfoa li p {
	    font-size: 3.8vw;
	    margin: 0;
	}
	
	/*************** 用户信息部分 B ***************/
	.wrapper .userinfob {
	    width: 100%;
	    margin-top: 2vw;
	    background-color: #fff;
	    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	    border-radius: 8px;
	    padding: 2vw 0;
	}
	
	.wrapper .userinfob li {
	    width: 100%;
	    padding: 3vw 4vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    border-bottom: 1px solid #eee;
	    transition: background-color 0.3s;
	    user-select: none;
	    cursor: pointer;
	}
	
	.wrapper .userinfob li:hover {
	    background-color: #f0f0f0; /* 悬停效果 */
	}
	
	.wrapper .userinfob li:last-child {
	    border-bottom: none; /* 去掉最后一个的下边框 */
	}
	
	.wrapper .userinfob li p {
	    font-size: 4.2vw;
	    color: #333;
	    margin: 0;
	    display: flex;
	    align-items: center;
	}
	
	.wrapper .userinfob li i {
	    font-size: 5vw;
	    color: #0097FF;
		margin-right: 3vw;
	}
	.wrapper .userinfob .fa-angle-right {
		margin-right: 10vw;
	}
</style>